<template>
	<view class="tui-addr-box">
		<form :report-submit="true">
			<tui-list-cell :arrow="true" padding="0" v-if="account_id<=0">
				<view class="tui-line-cell">
					<view class="tui-title">提现类型</view><picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
					<view class="input-select">{{array[index].name}}</view>
				</picker>
				</view>
			</tui-list-cell>
			<view v-if="account_type==2">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">支付宝账号</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.alipayname" placeholder="请输入支付宝账号" maxlength="30" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">支付宝姓名</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.alirealname" placeholder="请输入支付宝真实姓名" maxlength="15" type="text" disabled=""/>
					</view>
				</tui-list-cell>
			</view>
<!-- 			<view v-else-if="account_type==3">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">微信账号</view>
						<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.weacht" placeholder="请输入微信账号" maxlength="15" type="text" />
					</view>
				</tui-list-cell>
			</view> -->
			<view v-else>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">开户人姓名</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.realname" placeholder="请输入开户人姓名" maxlength="15" type="text" disabled/>
				</view>
			</tui-list-cell>
	<!-- 		<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">身份证号</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.id_card" placeholder="请输入开户人身份证号" maxlength="30"
					 type="text" />
				</view>
			</tui-list-cell> -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">预留手机号</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.mobile" placeholder="请输入预留手机号" maxlength="50" type="text" />
					
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">银行卡号</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.account_number" placeholder="请输入银行卡号" maxlength="50" type="text" />
					
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">银行名称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.brank_name" placeholder="请输入银行名称" maxlength="50" type="text" />
					
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">支行名称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.branch_bank_name" placeholder="请输入支行名称" maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
				    <input placeholder-class="tui-phcolor" class="tui-input" v-model="info.province + info.city + info.district" disabled name="city" placeholder="请选择城市" maxlength="50" type="text" @click="showPicker" />
				</view>
			</tui-list-cell>
			<view class="v-modal" v-show="selected" @click="selected=false"></view>
			</view>
			
			<!-- 默认地址 -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-swipe-cell">
					<view>设为默认账户</view>
					<switch @change="switch2Change" color="#19be6b" class="tui-switch-small" v-if="is_default" checked />
					<switch @change="switch2Change" color="#19be6b" class="tui-switch-small" v-if="!is_default" />
				</view>
			</tui-list-cell>
			<view class="tui-addr-save">
				<tui-button shadow type="danger" height="88rpx" shape="circle" @click="saveAccount">保存提现账户</tui-button>
			</view>
			<view class="tui-del" v-if="account_id">
				<tui-button shadow type="gray" height="88rpx" shape="circle" @click="delAccount">删除提现账户</tui-button>
			</view>
			
			</form>
		<!--picker-view start-->
		<view class="tui-mask-screen" :class="[showPickerStatus?'tui-mask-show':'']" @tap="hidePicker"></view>
		<view class="tui-picker-box" :class="[showPickerStatus?'tui-pickerbox-show':'']">
			<view class="picker-header tui-list-item">
				<view class="btn-cancle" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="hidePicker">取消</view>
				<view class="btn-sure" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="picker">确定</view>
			</view>
			<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
				<picker-view-column>
					<view v-for="(item,index) in provinceData" :key="index" class="item">{{item.province_name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in cityData" :key="index" class="item">{{item.city_name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in districtData" :key="index" class="item">{{item.district_name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<!--picker-view end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				title: "",
				defaultArea: "",
				is_default: false,
				selected: false,
				value: [0, 0, 0],
				showPickerStatus: false,
				account_type:2,
				array: [{name:'支付宝账号'},{name:'银行卡'}],
				index: 0,
				curProvince: {
				     name: '浙江省',
				  // 台湾省
				     id: '24',
				    // 34
				},
				curCity: {
					name: '',
					id: ''
				},
				curDistrict: {
					name: '',
					id: ''
				},
				info: {
					account_id: "",
					realname: "",
					id_card: "",
					mobile: "",
					account_type:'',
					account_number: "",
					brank_name: "",
					branch_bank_name: "",
					province_id: "",
					city_id: "",
					city:'',
					province:'',
					district_id: "",
					district:'',
					alipayname:"",
					alirealname:'',
					weacht:'',
					is_default:'0'
				}, //  地址
				account_id:'',
				provinceData: [
					
				],
				cityData: [],
				districtData: [],
				provinceindex:"",
				cityindex:"",
				districtindex:"",
			}
		},
		onLoad: function(options) {
			this.tui.haslogin();
			if(this.tui.isLogin()){
				this.init();
							 if (options.account_id) {
							 	uni.setNavigationBarTitle({
							 		title: "编辑提现账号"
							 	})
								this.account_id=options.account_id
							 	let ids = options.account_id;
									this.loadAccountInfo(ids);
							 } else {			
							 	this.is_default = 0;
							 	uni.setNavigationBarTitle({
							 			title: "添加提现账号"
							 	})
								this.resetAddressPro();
							 }
			}
		},
		methods: {
			init() {
				let token = this.tui.getToken();
				let authData = {
					token: token
				};
				let isauth = this.tui.request('user', 'post', authData, 1000, 1, '', 'getRealNames');
				Promise.resolve(isauth).then((value) => {
					if (value.data) {
						this.info.realname=this.info.alirealname=value.data.real_name;
					}
				})
			},
			// 读取修改账户信息
			loadAccountInfo(ids) {
		
				let token = this.tui.getToken();
				let datas={
					token: token,
					id:this.account_id
				};
				let account=this.tui.request('user','post',datas,1000,1,'','bankCart');
				Promise.resolve(account).then((value)=>{
				   if(value.code==200){
					  this.is_default = value.data.is_default == '1' ? true : false;
					   this.account_type=value.data.account_type;
			
					   if(value.data.account_type==2){
							this.info.alipayname = value.data.account_number;
							this.info.alirealname = value.data.realname;
					   }else if(value.data.account_type==1){
						   this.curProvince.name = value.data.province_name;
						   this.curCity.name = value.data.city_name;
						   this.curDistrict.name = value.data.district_name;
						   this.info.brankname = value.data.brankname;	
						   this.info.realname = value.data.realname;	
						   this.info.account_number=value.data.account_number;
						   this.info.id_card = value.data.id_card;
						   this.info.mobile = value.data.mobile;
						   this.is_default = value.data.is_default=='1' ? true : false;							
						   this.resetAddressPro();
						   this.info.province = this.curProvince.name;
						   
						   this.info.city = this.curCity.name;
						   this.info.district = this.curDistrict.name;		
						   this.info.brank_name = value.data.bankname;
						   this.info.branch_bank_name = value.data.branch_bank_name;
					   }else{
						   this.info.weacht = value.data.weacht;
					   }
				   }else{
				     	this.tui.toast(value.message);
				   }
				})
			
			},
			bindPickerChange: function(e) {
			   this.index = e.detail.value;
			   this.account_type=this.index==0?2:1;
			   console.log(this.index)
			   console.log(this.account_type)
			},
			//picker change切换事件
			columnPicker: function(e) {
			    this.curDistrict.name='';
				this.curCity.name='';
				let value = e.detail.value;
				//如果两者下标不一致，表示滚动过
				if (this.value[0] !== value[0]) {
					this.provinceData = this.provinceData;
					this.resetAddressCity(this.provinceData[value[0]]['province_id']);
			        this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					
				    this.value = [value[0],0, 0]
				} else if (this.value[1] !== value[1]) {
					this.provinceData = this.provinceData;
					this.cityData = this.cityData;
				    this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					this.value = [value[0], value[1], 0]
				} else {
					
					this.value = value
				}
			},
			//确定按钮
			picker: function(e) {
				let value = this.value;
				this.info.province = this.provinceData[value[0]].province_name;
				this.info.city = this.cityData[value[1]].city_name;
				this.info.district =this.districtData[value[2]].district_name;
				
				this.curProvince.id=this.provinceData[value[0]].province_id;
				this.curCity.id=this.cityData[value[1]].city_id;
				this.curDistrict.id=this.districtData[value[2]].district_id;
			 	this.showPickerStatus = false
			},
			// 显示picker-view
			showPicker: function() {
				this.showPickerStatus = true
				
			},
			// 隐藏picker-view
			hidePicker: function() {
				this.showPickerStatus = false
			},
			// 获取省
			resetAddressPro() {			
				let token = this.tui.getToken();
				let datas={
					token: token,
				};
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
					   
				     	this.provinceData = value.data;
				     		this.provinceData.forEach((item,index) => {
				     			if (this.curProvince.name == item.province_name) {
				     				this.curProvince.id = item.province_id;
									this.value=[index,0,0];
									this.provinceindex=index;
				     			}
				     		})
							
				     		this.resetAddressCity(this.curProvince.id);
				   }
				})
			},
			// 获取市
			resetAddressCity(id) {	
				let token = this.tui.getToken();
				let datas={
					token: token,
					province_id: id
				};
				let curCityId='';
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
				     	this.cityData = value.data;		
				     		this.cityData.forEach((item,index) => {
				     			if (this.curCity.name == item.city_name) {
				     				curCityId=this.curCity.id = item.city_id;
									this.value[1]=index;
									this.cityindex=index
				     			}else{
									this.curCity.id=this.cityData[0].city_id;
								}
				     		});
							curCityId=this.adressid?curCityId:this.curCity.id;
				     		this.resetAddressDistrict(curCityId)
				     				
				   }
				})
			},
			// 获取区
			resetAddressDistrict(id) {
				let token = this.tui.getToken();
				let datas={
					token: token,
					city_id: id
				};
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
				     	this.districtData = value.data;
				     		this.districtData.forEach((item,index) => {
				     			if (this.curDistrict.name == item.district_name) {
				     				this.curDistrict.id = item.district_id;  
									this.value=[this.provinceindex,this.cityindex,index];
				     			}else{
								    this.curDistrict.id = item.district_id;  
								}
				     		});			
				   }
				})
			},
			// 提交
			saveAccount() {
		
				let token = this.tui.getToken();
				
				let datas={
					token: token,		
					account_type:this.account_type,
					is_default: this.is_default ? '1' : '0',
				};
				
				if(this.account_type==2){
					datas.account_number=this.info.alipayname;
					datas.realname=this.info.alirealname;
				}else if(this.account_type==1){
					datas.address_ids = this.curProvince.id + ',' + this.curCity.id + ',' + this.curDistrict.id;
					datas.realname=this.info.realname;// 街道地址
					datas.mobile=this.info.mobile;// 收货手机号
					datas.id_card=this.info.id_card; // 收货手机号
					datas.account_number=this.info.account_number; // 收货手机号
					datas.bankname=this.info.brank_name; // 收货手机号
					datas.branch_bank_name=this.info.branch_bank_name; // 收货手机号
				}else{
					datas.weacht=this.info.weacht;
				}
				if (this.account_id) {
					
					datas.id = this.account_id;
					let bankaccount=this.tui.request('user','post',datas,1000,1,'','modifyBankCard');
					Promise.resolve(bankaccount).then((value)=>{
					   if(value.code==200){
					   	this.tui.toast(value.message);
					   	setTimeout(()=>{
					   		let pages = getCurrentPages();
					   		let currPage = pages[pages.length - 1]; //当前页面
					   		let prevPage = pages[pages.length - 2]; //上一个页面
					
					   		prevPage.setData({
					   		  isDoRefresh:true
					   		})
							//#ifdef MP-WEIXIN
							  prevPage.onLoad()
							//#endif
					   		uni.navigateBack();
					   	},1000)
					   }else{
					   	this.tui.toast(value.message);
					   }
					})
			
				} else {
					let bankaccount=this.tui.request('user','post',datas,1000,1,'','addBankCard');
					Promise.resolve(bankaccount).then((value)=>{
						if(value.code==200){
							this.tui.toast(value.message);
							setTimeout(()=>{
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 1]; //当前页面
								let prevPage = pages[pages.length - 2]; //上一个页面
						
								prevPage.setData({
								  isDoRefresh:true
								})
								//#ifdef MP-WEIXIN
								  prevPage.onLoad()
								//#endif
								uni.navigateBack();
							},1000)
						}else{
							this.tui.toast(value.message);
						}
					})
				}
			},
			delAccount(){
				let token = this.tui.getToken();	
				let datas={
					token: token,
					id: this.account_id,
				};
					let delaccount=this.tui.request('user','post',datas,1000,1,'','delBankCart');
					Promise.resolve(delaccount).then((value)=>{
					   if(value.code==200){
					   	this.tui.toast(value.message);
					   	setTimeout(()=>{
					   		let pages = getCurrentPages();
					   		let currPage = pages[pages.length - 1]; //当前页面
					   		let prevPage = pages[pages.length - 2]; //上一个页面
					   
					   		prevPage.setData({
					   		  isDoRefresh:true
					   		})
							//#ifdef MP-WEIXIN
							  prevPage.onLoad()
							//#endif
					   		uni.navigateBack();
					   	},1000)
					   }else{
					   	this.tui.toast(value.message);
					   }
					})
							
			},
			switch2Change: function(e) {
				if (e.target.value) {
					this.is_default = e.target.value;
				} else {
					this.is_default = false;
				}
			},
		}
	}
</script>

<style>
	    /* picker start*/
	    
	    .tui-mask-screen {
	    	position: fixed;
	    	top: 0;
	    	left: 0;
	    	right: 0;
	    	bottom: 0;
	    	background: rgba(0, 0, 0, 0.6);
	    	z-index: 99996;
	    	transition: all 0.3s ease-in-out;
	    	opacity: 0;
	    	visibility: hidden;
	    }
	    
	    .tui-mask-show {
	    	opacity: 1;
	    	visibility: visible;
	    }
	    
	    .tui-picker-box {
	    	width: 100%;
	    	position: fixed;
	    	left: 0;
	    	right: 0;
	    	bottom: 0;
	    	z-index: 99999;
	    	visibility: hidden;
	    	transform: translate3d(0, 100%, 0);
	    	transform-origin: center;
	    	transition: all 0.3s ease-in-out;
	    	min-height: 20rpx;
	    	background: #fff;
	    }
	    
	    .tui-pickerbox-show {
	    	transform: translate3d(0, 0, 0);
	    	visibility: visible;
	    }
	    
	    .picker-header {
	    	width: 100%;
	    	height: 90rpx;
	    	padding: 0 46rpx;
	    	display: flex;
	    	justify-content: space-between;
	    	align-items: center;
	    	box-sizing: border-box;
	    	font-size: 32rpx;
	    	background: #fff;
	    }
	    
	    .tui-list-item::after {
	    	left: 0;
	    }
	    
	    .btn-cancle {
	    	padding: 20rpx;
	    	color: #888;
	    }
	    
	    .btn-sure {
	    	padding: 20rpx;
	    	color: #5677fc;
	    }
		.picker-view {
			width: 100%;
			height: 260px;
		}
		.item {
			text-align: center;
		}
		.picker-item{text-align:center}
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}
</style>
